<template>
	<view>
		<nav-bar title="站点详情"></nav-bar>
		<image :style="{'top':navHeight+'px'}" class="top-bg" src="https://oss.jxhecong.com/v2/image/bike_top_bg@2x.png"></image>
		<scroll-view :style="{'margin-top':(navHeight+10)+'px'}">
			<view class="card">
				<bike-site-cell :data="site"></bike-site-cell>
			</view>
			<view class="card" style="margin-top:24rpx;">
				<custom-tab-bar :chargeMode="tabIndex" @modeChange="modeChange"></custom-tab-bar>
				<view style="padding-left:30rpx;padding-right:30rpx;padding-bottom:36rpx;" v-show="tabIndex==0">
					<view class="line">
						<view class="item-cell" style="justify-content: space-between;">
							<view class="item-cell">
								<view class="label">收费价格</view>
								<text>功率区间定价</text>
							</view>
							<view class="item-cell" style="align-items: center;" @click.stop="showPop">
								<text style="color:#6ABF6C;font-size:28rpx;">电价详情</text>
								<image style="width:24rpx;height:24rpx;" src="https://oss.jxhecong.com/v2/image/arrow_gray@2x.png"></image>
							</view>
						</view>
						<view class="item-cell">
							<view class="label">收费方式</view>
							<view v-if="site.chargingModel == 0">时长收费</view>
							<view v-else="site.chargingModel == 1">金额收费</view>
						</view>
						<view class="item-cell">
							<view class="label" v-if="site.chargingModel ==0">可充时长</view>
							<view class="label" v-else="site.chargingModel ==1">可充金额</view>
							<view style="flex:1">{{site.billingTips}}</view>
						</view>
						<!-- <view class="item-cell">
							<view class="label">智能充电</view>
							<view>已启用</view>
						</view> -->
					</view>
					<!-- <view class="line">
						<view class="section-title">优惠活动</view>
						<view class="item-cell">
							<view class="label">新用户活动</view>
							<view style="flex:1;">首次在本站点充电的用户，可享受3次充电优惠，每次仅需0.10元</view>
						</view>
						<view class="item-cell" style="justify-content: space-between;">
							<view class="item-cell">
								<view class="label">包月充电</view>
								<text>1、3、6、12个月</text>
							</view>
							<view class="item-cell" style="align-items: center;" @click.stop="buy">
								<text style="color:#00C3A6;font-size:28rpx;">去购买</text>
								<image style="width:24rpx;height:24rpx;" src="../../static/images/arrow_gray@2x.png"></image>
							</view>
						</view>
					</view> -->
					<view>
						<view class="item-cell">
							<view class="label">开放时间</view>
							<view>{{site.startTime}} - {{site.endTime}}</view>
						</view>
						<view class="item-cell">
							<view class="label">设备数量</view>
							<view>{{site.deviceCount}}台</view>
						</view>
						<view class="item-cell">
							<view class="label">客服电话</view>
							<view style="color:#6ABF6C;" @click.stop="makePhoneCall(site.servicePhone)">{{site.servicePhone}}</view>
						</view>
					</view>
				</view>
				<view v-show="tabIndex==1">
					<view v-for="(item,index) in site.deviceList" :key="index" @click.native="bike_charge(item)">
						<bike-device-cell :data="item"></bike-device-cell>
					</view>
				</view>
				<empty :show="tabIndex==1&&site.deviceList.length==0"></empty>
			</view>
		</scroll-view>
		<view style="height:200rpx;"></view>
		<view class="footer">
			<view class="scan" @click.stop="scan">
				<image src="https://oss.jxhecong.com/v2/image/scan@2x.png"></image>
				<text>扫码充电</text>
			</view>
		</view>
		<power-pop-view ref="powerPopView"></power-pop-view>
	</view>
</template>

<script>
	var globalData = getApp({
		allowDefault: true
	}).globalData
	import navBar from '../components/navBar.vue'
	import bikeSiteCell from '../components/bikeSiteCell.vue'
	import customTabBar from '../components/customTabBar.vue'
	import bikeDeviceCell from '../components/bikeDeviceCell.vue'
	import powerPopView from './powerPopView.vue'
	import empty from '@/components/empty.vue'
	import * as siteApi from '../../api/site/index.js'
	import * as homeApi from '../../api/home/index.js'
	export default{
		components:{navBar,bikeSiteCell,customTabBar,bikeDeviceCell,powerPopView,empty},
		data(){
			return{
				id:'',
				navHeight:0,
				tabIndex:0,
				site:{
					id:'',
					name:'',
					address:'',
					expireSocketCount:'',
					totalSocketCount:'',
					labels:[],
					chargingPowerList:[],
					chargingModel:'',
					billingTips:'',
					startTime:'',
					endTime:'',
					deviceCount:'',
					servicePhone:'',
					deviceList:[]
				}
			}
		},
		onLoad(options) {
			this.id=options.id;
			this.getSiteDetail()
			this.navHeight = globalData.titleHeight;
		},
		onShow() {
			// #ifdef APP-PLUS || APP-PLUS-NVUE
			plus.navigator.setStatusBarStyle('light');
			// #endif
		},
		methods:{
			modeChange(data){
				this.tabIndex=data.index
			},
			buy(){
				uni.navigateTo({
					url:'/pages/charge/vipCharge'
				})
			},
			showPop(){
				this.$refs['powerPopView'].open(this.id)
			},
			bike_charge(item){
				uni.navigateTo({
					url:'/pages/charge/bikeCharge?id='+item.id
				})
			},
			getSiteDetail() {
				siteApi.getChargingGroupDetail(this.id).then((res)=>{
					console.log(res.data)
					this.site = res.data
				})
			},
			makePhoneCall(tel){
				uni.makePhoneCall({
					phoneNumber:tel
				})
			},
			scan(){
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						let qrcode = res.result
						uni.showLoading({
							title: '请稍后'
						})
						homeApi.getChargeScan(qrcode).then((res) => {
							uni.hideLoading()
							if (res.data.deviceType == 0) {
								uni.navigateTo({
									url: '/pages/charge/bikeCharge?id=' + res.data.chargingId
								})
							} else {
								uni.navigateTo({
									url: '/pages/site/selectChargGun?id=' + res.data.chargingId
								})
							}
						}).catch((errMsg) => {
							uni.hideLoading()
							uni.showToast({
								title: errMsg,
								icon: 'none'
							})
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-bg{
		position: fixed;
		left:0rpx;
		right:0rpx;
		height:112rpx;
		width:100%;
		z-index: 0;
	}
	.card{
		position: relative;
		background: #FFFFFF;
		box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
		border-radius: 9px;
		margin-left:30rpx;
		margin-right:30rpx;
	}
	.item-cell{
		display: flex;
		justify-content: flex-start;
		margin-top:24rpx;
	}
	.label{
		width:180rpx;
		height:42rpx;
		background-color:#F4F4F5;
		line-height:42rpx;
		border-radius:21rpx;
		text-align: center;
		color:#303133;
		font-size:24rpx;
		margin-right:30rpx;
		flex-shrink: 1;
	}
	.section-title{
		color:#303133;
		font-size:32rpx;
		margin-top:28rpx;
		font-weight: bold;
	}
	.line{
		border-bottom: solid 1rpx #DCDFE6;
		padding-bottom:18rpx;
	}
	.footer{
		position: fixed;
		left:0rpx;
		right:0rpx;
		bottom:0rpx;
		height:116rpx;
		background-color:#FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.scan{
		background: #6ABF6C;
		box-shadow: 0px 1px 2px 0px rgba(8, 139, 120, 0.3);
		border-radius: 9px;
		height:90rpx;
		display: flex;
		width:100%;
		justify-content: center;
		align-items: center;
		margin-left:30rpx;
		margin-right:30rpx;
		image{
			width:42rpx;
			height:42rpx;
		}
		text{
			color:#FFFFFF;
			font-size:36rpx;
			margin-left:24rpx;
		}
	}
</style>
